import { createBrowserRouter, Navigate } from 'react-router-dom'
import { lazy } from 'react'
const Layout = lazy(() => import('../pages/layout'))
const Login = lazy(() => import('../pages/login'))
const Home = lazy(() => import('../pages/home'))
const Socket = lazy(() => import('../pages/socket'))
const User = lazy(() => import('../pages/user'))
const UserList = lazy(() => import('../pages/userList'))


const routerAll = {
    home: {
        path: '/index/home',
        element: <Home />,
        title: '首页'
    },
    socket: {
        path: '/index/socket',
        element: <Socket />,
        title: '聊天'
    },
    user: {
        path: '/index/user',
        element: <User />,
        title: '用户',
        children: [
            {
                path: '/index/user/userList',
                element: <UserList />,
                title: '用户列表'
            }
        ]
    },
}

const roles = {
    admin: {
        routerPage: ['home', 'user', 'socket'],
        btns: {
            home: ['add', 'edit', 'delet']
        }
    },
    user: {
        routerPage: ['home'],
        btns: {
            home: ['add', 'edit']
        }
    }
}
const username = localStorage.getItem('username') || 'admin'
const { routerPage, btns } = roles[username]

export const router = routerPage.map((item) => {
    return {
        ...routerAll[item],
        loader: () => {
            return btns[item]
        }
    }
})
const routers = createBrowserRouter([
    {
        path: '/index',
        element: <Layout />,
        children: router
    },
    {
        path: '/login',
        element: <Login />
    },
    {
        path: '*',
        element: <div>404</div>
    },
    {
        path: '/',
        element: <Navigate to='/login' />
    }
])
export default routers